<template>
    <div>
        <div v-show="false">{{ dataInit }}</div>
        <!-- 完整模式 -->
        <div
            :style="{
                fontFamily: detail.style.fontFamily,
                color: detail.style.foreColor,
                width: detail.style.position.w + 'px',
                height: detail.style.position.h + 'px',
                border: detail.style.waterBorderWidth + 'px solid',
                borderRadius: detail.style.borderRadius + 'px',
                borderColor: detail.style.waterBorderColor,
                padding: '10px 20px',
            }"
            v-if="detail.style.weatherModel === '2'"
        >
            <div :style="{ fontSize: detail.style.position.h / 13 + 'px', marginBottom: '10px' }">
                <i class="el-icon-location-information"></i>
                <span style="margin-left: 5px">{{ nowData.city || '未知位置' }}</span>
            </div>
            <el-row :gutter="20">
                <el-col style="width: auto">
                    <img :src="require(`@/assets/topo-img/weather/${nowData.code}.svg`)" :style="{ width: detail.style.position.h / 2 + 'px', height: detail.style.position.h / 2 + 'px' }" />
                </el-col>
                <el-col style="width: auto">
                    <div :style="{ fontSize: detail.style.position.h / 5 + 'px' }">{{ nowData.temperature || '—' }} °C</div>
                    <div :style="{ fontSize: detail.style.position.h / 13 + 'px' }">{{ nowData.text || '—' }}</div>
                    <!-- <div :style="{ fontSize: detail.style.position.h / 13 + 'px' }">{{ nowData.wea || '—' }} {{ nowData.win || '—' }} {{ nowData.win_speed || '—' }}</div> -->
                </el-col>
            </el-row>
            <!-- 免费版没有这些参数，需要自行购买呢 -->
            <!-- <div :style="{ marginTop: '10px', fontSize: detail.style.position.h / 13 + 'px' }">
                <span>湿度：{{ nowData.humidity || '—' }}</span>
                <span style="margin-left: 10px; margin-right: 10px">|</span>
                <span>气压：{{ nowData.pressure || '—' }}</span>
                <span style="margin-left: 10px; margin-right: 10px">|</span>
                <span>空气质量：{{ nowData.air_level || '—' }}</span>
            </div> -->
        </div>
        <!-- 简约模式 -->
        <div
            :style="{
                fontFamily: detail.style.fontFamily,
                color: detail.style.foreColor,
                width: detail.style.position.w + 'px',
                height: detail.style.position.h + 'px',
                border: detail.style.waterBorderWidth + 'px solid',
                borderRadius: detail.style.borderRadius + 'px',
                borderColor: detail.style.waterBorderColor,
                padding: '10px 20px',
            }"
            v-else
        >
            <div :style="{ fontSize: detail.style.position.h / 13 + 'px', marginBottom: '10px' }">
                <i class="el-icon-location-information"></i>
                <span style="margin-left: 5px">{{ nowData.city || '未知位置' }}</span>
            </div>
            <el-row :gutter="20">
                <el-col style="width: auto">
                    <img :src="require(`@/assets/topo-img/weather/${nowData.code}.svg`)" :style="{ width: detail.style.position.h / 2 + 'px', height: detail.style.position.h / 2 + 'px' }" />
                </el-col>
                <el-col style="width: auto">
                    <div :style="{ fontSize: detail.style.position.h / 5 + 'px' }">{{ nowData.temperature || '—' }} °C</div>
                    <div :style="{ fontSize: detail.style.position.h / 13 + 'px' }">{{ nowData.text || '—' }}</div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

import BaseView from './View';

export default {
    name: 'viewWeather',
    extends: BaseView,
    props: {},
    data() {
        return {
            nowData: {
                code: '0',
                temperature: '',
                text: '',
                city: '',
            },
            timer: null,
        };
    },
    computed: {
        dataInit() {
            if (this.detail.componentShow.indexOf('天气') > -1) {
                const { districtCode } = this.detail.dataBind;
                if (districtCode) {
                    this.getWeatherData();
                }
            }
        },
    },
    mounted() {
        const { districtCode } = this.detail.dataBind;
        if (districtCode) {
            this.getWeatherData();
            this.timer = setInterval(() => {
                this.getWeatherData();
            }, 60000 * 60);
        }
    },
    methods: {
        getWeatherData() {
            const { lat, lon } = this.detail.dataBind;
            let query = {
                key: process.env.VUE_APP_XIN_ZHI_KEY,
                location: `${lat}:${lon}`,
            };
            let url = 'https://api.seniverse.com/v3/weather/now.json'; // 心知天气
            axios({
                url: url,
                method: 'get',
                params: query,
            }).then((res) => {
                const { results } = res.data || {};
                const { location, now } = results[0];
                this.nowData = { ...now, city: location.name };
            });
        },
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    },
};
</script>

<style lang="scss" scoped></style>
